<template>
  <div class="my-agreement-page">
    <!-- 头部导航栏 -->
    <van-nav-bar
      title="我的租约"
      left-text="返回"
      left-arrow
      @click-left="goBack"
      class="header-bar"
    >
      <template #right>
        <van-icon name="orders-o" @click="goToSearch" class="text-lg" />
      </template>
    </van-nav-bar>

    <!-- 页面内容 -->
    <div class="page-content">
      <van-skeleton :row="20" :loading="!agreementList">
        <!-- 统计信息 -->
        <div class="stats-section" v-if="agreementList?.length">
          <div class="stats-grid">
            <div class="stats-card">
              <van-icon name="orders-o" class="stats-icon" />
              <div class="stats-info">
                <div class="stats-number">{{ agreementList.length }}</div>
                <div class="stats-label">总租约</div>
              </div>
            </div>
            <div class="stats-card">
              <van-icon name="passed" class="stats-icon active" />
              <div class="stats-info">
                <div class="stats-number">{{ activeCount }}</div>
                <div class="stats-label">生效中</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 租约列表 -->
        <div class="content-container">
          <template v-if="agreementList?.length">
            <!-- 浮动装饰元素 -->
            <div class="floating-elements">
              <div class="floating-circle circle-1"></div>
              <div class="floating-circle circle-2"></div>
              <div class="floating-circle circle-3"></div>
            </div>
            
            <div class="agreement-list">
              <div 
                class="agreement-card-wrapper"
                v-for="(item, index) in agreementList"
                :key="item.id"
                :style="{ animationDelay: `${index * 0.1}s` }"
                @click="goAgreementDetail(item)"
              >
                <div class="agreement-card" :class="getCardThemeClass(item.leaseStatus)">
                  <!-- 状态指示器 -->
                  <div class="status-indicator" :class="getStatusClass(item.leaseStatus)">
                    <div class="status-dot"></div>
                  </div>
                  
                  <!-- 卡片头部 -->
                  <div class="card-header">
                    <div class="apartment-info">
                      <h3 class="apartment-name">{{ item.apartmentName }}</h3>
                      <div class="room-info">
                        <van-icon name="home-o" class="room-icon" />
                        <span class="room-number">{{ item.roomNumber }}房间</span>
                      </div>
                    </div>
                    <div class="price-section">
                      <div class="price-amount">
                        <span class="currency">¥</span>
                        <span class="amount">{{ item.rent }}</span>
                      </div>
                      <div class="price-unit">/月</div>
                    </div>
                  </div>
                  
                  <!-- 房间图片 -->
                  <div class="room-image-container">
                    <van-image
                      class="room-image"
                      :src="item.roomGraphVoList?.[0]?.url || ''"
                      fit="cover"
                    >
                      <template v-slot:error>
                        <div class="image-error">
                          <van-icon name="photo-fail" />
                          <span>加载失败</span>
                        </div>
                      </template>
                      <template v-slot:loading>
                        <div class="image-loading">
                          <van-loading type="spinner" size="20" />
                        </div>
                      </template>
                    </van-image>
                    
                    <!-- 图片覆盖层 -->
                    <div class="image-overlay">
                      <div class="overlay-content">
                        <van-icon name="eye-o" class="view-icon" />
                        <span>查看详情</span>
                      </div>
                    </div>
                  </div>
                  
                  <!-- 租期信息 -->
                  <div class="lease-info">
                    <div class="lease-period">
                      <van-icon name="calendar-o" class="calendar-icon" />
                      <span class="period-text">{{ item.leaseStartDate }} 至 {{ item.leaseEndDate }}</span>
                    </div>
                  </div>
                  
                  <!-- 标签区域 -->
                  <div class="tags-section">
                    <div class="source-tag" :class="getSourceTagClass(item.sourceType)">
                      {{ getLabelByValue(AgreementSourceMap, item.sourceType) }}
                    </div>
                    <div class="status-tag" :class="getStatusTagClass(item.leaseStatus)">
                      {{ getLabelByValue(AgreementStatusMap, item.leaseStatus) }}
                    </div>
                  </div>
                  
                  <!-- 操作按钮 -->
                  <div class="action-buttons" @click.stop>
                    <van-button
                      v-if="item.leaseStatus === AgreementStatus.SIGNED"
                      class="action-btn primary-btn"
                      size="small"
                      @click="goAgreementDetail(item, { isEdit: true, isRenew: true, isAdd: true })"
                    >
                      <van-icon name="replay" />
                      续约
                    </van-button>
                    
                    <van-button
                      v-if="item.leaseStatus === AgreementStatus.RENEW_TO_BE_CONFIRMED"
                      class="action-btn edit-btn"
                      size="small"
                      @click="goAgreementDetail(item, { isRenew: true, isEdit: true, isAdd: false })"
                    >
                      <van-icon name="edit" />
                      修改
                    </van-button>
                    

                  
                    <van-button
                      v-if="item.leaseStatus === AgreementStatus.SIGNED"
                      class="action-btn danger-btn"
                      size="small"
                      @click="rentRefundHandle(item)"
                    >
                      <van-icon name="close" />
                      退租
                    </van-button>
                  </div>
                  
                  <!-- 装饰性元素 -->
                  <div class="card-decoration">
                    <div class="decoration-line"></div>
                    <div class="decoration-dots">
                      <span class="dot"></span>
                      <span class="dot"></span>
                      <span class="dot"></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
          
          <!-- 空状态 -->
          <van-empty 
            v-else 
            description="暂无租约记录" 
            class="empty-state"
          >
            <van-button 
              type="primary" 
              class="bottom-button"
              @click="goToSearch"
            >
              立即租房
            </van-button>
          </van-empty>
        </div>
      </van-skeleton>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, computed } from "vue";
import { useRouter } from "vue-router";
import type { AgreementItemInterface } from "@/api/search/types";
import { getMyAgreementList, saveOrUpdateAgreement } from "@/api/search";
import { showConfirmDialog, showToast } from "vant";
import {
  AgreementSourceMap,
  AgreementStatus,
  AgreementStatusMap,
  getLabelByValue
} from "@/enums/constEnums";

const router = useRouter();
// 租约列表
const agreementList = ref<AgreementItemInterface[]>();

// 计算生效中的租约数量
const activeCount = computed(() => {
  return agreementList.value?.filter(item => item.leaseStatus === AgreementStatus.SIGNED).length || 0;
});
// 获取租约列表
const getAgreementListHandle = async () => {
  const { data } = await getMyAgreementList();
  agreementList.value = data;
};
// 跳转到租约详情
const goAgreementDetail = (
  item: AgreementItemInterface,
  query: object = {}
) => {
  router.push({
    path: "/agreement",
    query: { id: item.id, ...query }
  });
};
// 提前退租
const rentRefundHandle = (item: AgreementItemInterface) => {
  showConfirmDialog({
    title: "提前退租",
    message: "确定要提前退租吗？",
    cancelButtonText: "取消",
    confirmButtonText: "确定"
  })
    .then(async () => {
      await saveOrUpdateAgreement({
        id: item.id,
        status: AgreementStatus.TO_BE_CONFIRMED
      });
      //   操作成功
      showToast({
        type: "success",
        message: "操作成功"
      });
      //   修改当前租约状态
      item.leaseStatus = AgreementStatus.TO_BE_CONFIRMED;
    })
    .catch(() => {});
};

// 获取卡片主题类
const getCardThemeClass = (status: number) => {
  switch (status) {
    case AgreementStatus.SIGNED:
      return 'theme-success'
    case AgreementStatus.WAITING:
      return 'theme-warning'
    case AgreementStatus.RENEW_TO_BE_CONFIRMED:
      return 'theme-info'
    case AgreementStatus.TO_BE_CONFIRMED:
      return 'theme-danger'
    default:
      return 'theme-default'
  }
}

// 获取状态指示器类
const getStatusClass = (status: number) => {
  switch (status) {
    case AgreementStatus.SIGNED:
      return 'status-success'
    case AgreementStatus.WAITING:
      return 'status-warning'
    case AgreementStatus.RENEW_TO_BE_CONFIRMED:
      return 'status-info'
    case AgreementStatus.TO_BE_CONFIRMED:
      return 'status-danger'
    default:
      return 'status-default'
  }
}

// 获取来源标签类
const getSourceTagClass = (sourceType: number) => {
  return `source-type-${sourceType}`
}

// 获取状态标签类
const getStatusTagClass = (status: number) => {
  switch (status) {
    case AgreementStatus.SIGNED:
      return 'status-success-tag'
    case AgreementStatus.WAITING:
      return 'status-warning-tag'
    case AgreementStatus.RENEW_TO_BE_CONFIRMED:
      return 'status-info-tag'
    case AgreementStatus.TO_BE_CONFIRMED:
      return 'status-danger-tag'
    default:
      return 'status-default-tag'
  }
}

// 返回上一页
const goBack = () => {
  router.back();
};

// 跳转到搜索页面
const goToSearch = () => {
  router.push('/search');
};

onMounted(async () => {
  await getAgreementListHandle();
});
</script>

<style scoped lang="less">
// 添加关键帧动画
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.my-agreement-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    z-index: 0;
  }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.header-bar {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  position: relative;
  z-index: 10;
  animation: slideInDown 0.6s ease-out;
  
  :deep(.van-nav-bar__title) {
    color: white;
    font-weight: 700;
    font-size: 18px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }
  
  :deep(.van-nav-bar__text) {
    color: white;
    font-weight: 500;
  }
  
  :deep(.van-icon) {
    color: white;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: transform 0.2s ease;
    
    &:hover {
      transform: scale(1.1);
    }
  }
}

.page-content {
  padding-top: 46px; // NavBar高度
  position: relative;
  z-index: 1;
  animation: fadeInUp 0.8s ease-out;
}

.stats-section {
  padding: 20px 16px;
  margin-bottom: 12px;
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.stats-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  &:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    
    &::before {
      opacity: 1;
    }
    
    .stats-icon {
      animation: pulse 1s ease-in-out infinite;
    }
  }
  
  .stats-icon {
    font-size: 28px;
    color: #667eea;
    margin-right: 16px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    
    &.active {
      color: #52c41a;
      filter: drop-shadow(0 0 8px rgba(82, 196, 26, 0.3));
    }
  }
  
  .stats-info {
    flex: 1;
    position: relative;
    z-index: 2;
    
    .stats-number {
      font-size: 24px;
      font-weight: 700;
      color: #333;
      margin-bottom: 4px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    .stats-label {
      font-size: 13px;
      color: #666;
      font-weight: 500;
      letter-spacing: 0.5px;
    }
  }
}

.content-container {
  padding: 0 16px 20px;
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

/* 浮动装饰元素 */
.floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.floating-circle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
  animation: float 6s ease-in-out infinite;
}

.circle-1 {
  width: 120px;
  height: 120px;
  top: 10%;
  right: -60px;
  animation-delay: 0s;
}

.circle-2 {
  width: 80px;
  height: 80px;
  top: 60%;
  left: -40px;
  animation-delay: 2s;
}

.circle-3 {
  width: 100px;
  height: 100px;
  bottom: 20%;
  right: 20px;
  animation-delay: 4s;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

/* 租约列表 */
.agreement-list {
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  position: relative;
}

.agreement-card-wrapper {
  animation: slideInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.agreement-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.agreement-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}

/* 主题颜色 */
.theme-success {
  border-left: 4px solid #52c41a;
  background: linear-gradient(135deg, rgba(82, 196, 26, 0.05), rgba(255, 255, 255, 0.95));
}

.theme-warning {
  border-left: 4px solid #faad14;
  background: linear-gradient(135deg, rgba(250, 173, 20, 0.05), rgba(255, 255, 255, 0.95));
}

.theme-info {
  border-left: 4px solid #1890ff;
  background: linear-gradient(135deg, rgba(24, 144, 255, 0.05), rgba(255, 255, 255, 0.95));
}

.theme-danger {
  border-left: 4px solid #ff4d4f;
  background: linear-gradient(135deg, rgba(255, 77, 79, 0.05), rgba(255, 255, 255, 0.95));
}

.theme-default {
  border-left: 4px solid #d9d9d9;
  background: linear-gradient(135deg, rgba(217, 217, 217, 0.05), rgba(255, 255, 255, 0.95));
}

/* 状态指示器 */
.status-indicator {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  z-index: 2;
}

.status-dot {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.status-success .status-dot { background: #52c41a; }
.status-warning .status-dot { background: #faad14; }
.status-info .status-dot { background: #1890ff; }
.status-danger .status-dot { background: #ff4d4f; }
.status-default .status-dot { background: #d9d9d9; }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 currentColor; }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* 卡片头部 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 20px 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
}

.apartment-info {
  flex: 1;
}

.apartment-name {
  font-size: 18px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.room-info {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #7f8c8d;
}

.room-icon {
  font-size: 14px;
  color: #3498db;
}

.room-number {
  font-size: 14px;
  font-weight: 500;
}

.price-section {
  text-align: right;
}

.price-amount {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 2px;
}

.currency {
  font-size: 14px;
  color: #e74c3c;
  font-weight: 600;
}

.amount {
  font-size: 24px;
  font-weight: 700;
  color: #e74c3c;
  line-height: 1;
}

.price-unit {
  font-size: 12px;
  color: #95a5a6;
  margin-top: 2px;
}

/* 房间图片 */
.room-image-container {
  position: relative;
  margin: 0 20px 16px;
  border-radius: 16px;
  overflow: hidden;
  height: 180px;
  background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
}

.room-image {
  width: 100%;
  height: 100%;
  transition: transform 0.4s ease;
}

.agreement-card:hover .room-image {
  transform: scale(1.1);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.agreement-card:hover .image-overlay {
  opacity: 1;
}

.overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: white;
  font-size: 14px;
  font-weight: 500;
}

.view-icon {
  font-size: 24px;
}

.image-error, .image-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #95a5a6;
  gap: 8px;
}

/* 租期信息 */
.lease-info {
  padding: 0 20px 16px;
}

.lease-period {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(52, 152, 219, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(52, 152, 219, 0.2);
}

.calendar-icon {
  font-size: 16px;
  color: #3498db;
}

.period-text {
  font-size: 13px;
  color: #2c3e50;
  font-weight: 500;
}

/* 标签区域 */
.tags-section {
  display: flex;
  gap: 8px;
  padding: 0 20px 16px;
  flex-wrap: wrap;
}

.source-tag, .status-tag {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  backdrop-filter: blur(10px);
}

.source-tag {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.status-success-tag {
  background: linear-gradient(135deg, #52c41a, #73d13d);
  color: white;
}

.status-warning-tag {
  background: linear-gradient(135deg, #faad14, #ffc53d);
  color: white;
}

.status-info-tag {
  background: linear-gradient(135deg, #1890ff, #40a9ff);
  color: white;
}

.status-danger-tag {
  background: linear-gradient(135deg, #ff4d4f, #ff7875);
  color: white;
}

.status-default-tag {
  background: linear-gradient(135deg, #d9d9d9, #f0f0f0);
  color: #666;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 8px;
  padding: 16px 20px 20px;
  flex-wrap: wrap;
}

.action-btn {
  flex: 1;
  min-width: 80px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 13px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.3s ease;
  border: none;
  position: relative;
  overflow: hidden;
}

.action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.action-btn:hover::before {
  left: 100%;
}

.primary-btn {
  background: linear-gradient(135deg, #1890ff, #40a9ff);
  color: white;
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}

.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(24, 144, 255, 0.4);
}

.edit-btn {
  background: linear-gradient(135deg, #52c41a, #73d13d);
  color: white;
  box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
}

.edit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(82, 196, 26, 0.4);
}

.confirm-btn {
  background: linear-gradient(135deg, #faad14, #ffc53d);
  color: white;
  box-shadow: 0 4px 12px rgba(250, 173, 20, 0.3);
}

.confirm-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(250, 173, 20, 0.4);
}

.danger-btn {
  background: linear-gradient(135deg, #ff4d4f, #ff7875);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
}

.danger-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 77, 79, 0.4);
}

/* 装饰性元素 */
.card-decoration {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.decoration-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(52, 152, 219, 0.3), transparent);
}

.decoration-dots {
  display: flex;
  gap: 4px;
  margin: 0 12px;
}

.dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(52, 152, 219, 0.4);
  animation: dotPulse 2s infinite;
}

.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

.empty-state {
  padding: 80px 20px;
  animation: fadeInUp 0.8s ease-out 0.6s both;
  
  :deep(.van-empty__description) {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    font-weight: 500;
  }
  
  :deep(.van-empty__image) {
    opacity: 0.8;
  }
  
  .bottom-button {
    margin-top: 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 25px;
    padding: 12px 32px;
    font-weight: 600;
    font-size: 16px;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
    }
    
    &:active {
      transform: translateY(0);
    }
  }
}

// 增强所有按钮的样式
:deep(.van-button) {
  border-radius: 20px;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  z-index: 3;
  
  &--mini {
    border-radius: 15px;
    font-size: 12px;
    padding: 6px 12px;
  }
  
  &--primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    
    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    }
    
    &.van-button--plain {
      background: rgba(255, 255, 255, 0.9);
      color: #667eea;
      border: 2px solid rgba(102, 126, 234, 0.3);
      
      &:hover {
        background: rgba(102, 126, 234, 0.1);
        border-color: #667eea;
      }
    }
  }
  
  &--danger {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
    border: none;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
    
    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
    }
    
    &.van-button--plain {
      background: rgba(255, 255, 255, 0.9);
      color: #ff6b6b;
      border: 2px solid rgba(255, 107, 107, 0.3);
      
      &:hover {
        background: rgba(255, 107, 107, 0.1);
        border-color: #ff6b6b;
      }
    }
  }
}

// 响应式设计
@media (max-width: 480px) {
  .my-agreement-page {
    &::before {
      backdrop-filter: blur(5px);
    }
  }
  
  .header-bar {
    backdrop-filter: blur(15px);
    
    :deep(.van-nav-bar__title) {
      font-size: 16px;
    }
  }
  
  .stats-section {
    padding: 16px 12px;
  }
  
  .stats-grid {
    gap: 12px;
  }
  
  .stats-card {
    padding: 16px;
    border-radius: 16px;
    
    .stats-icon {
      font-size: 24px;
      margin-right: 12px;
    }
    
    .stats-info {
      .stats-number {
        font-size: 20px;
      }
      
      .stats-label {
        font-size: 12px;
      }
    }
  }
  
  .content-container {
    padding: 0 12px 16px;
  }
  
  .agreement-list {
    padding: 0 12px;
    gap: 16px;
    
    .agreement-card {
      border-radius: 16px;
      margin-bottom: 12px;
    }
  }
  
  .floating-circle {
    display: none; /* 移动端隐藏浮动元素 */
  }
  
  .card-header {
    padding: 16px 16px 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .apartment-name {
    font-size: 16px;
  }
  
  .price-section {
    text-align: left;
    align-self: flex-end;
  }
  
  .amount {
    font-size: 20px;
  }
  
  .room-image-container {
    height: 140px;
    margin: 0 16px 12px;
  }
  
  .lease-period {
    padding: 10px 12px;
  }
  
  .period-text {
    font-size: 12px;
  }
  
  .tags-section {
    padding: 0 16px 12px;
  }
  
  .action-buttons {
    padding: 12px 16px 16px;
    gap: 6px;
  }
  
  .action-btn {
    min-width: 70px;
    height: 32px;
    font-size: 12px;
  }
  
  .empty-state {
    padding: 60px 16px;
    
    .bottom-button {
      padding: 10px 24px;
      font-size: 14px;
      border-radius: 20px;
    }
  }
  
  :deep(.van-button--mini) {
    border-radius: 12px;
    font-size: 11px;
    padding: 4px 8px;
  }
}

// 超小屏幕优化
@media (max-width: 360px) {
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .stats-card {
    padding: 12px;
    
    .stats-icon {
      font-size: 20px;
      margin-right: 8px;
    }
    
    .stats-info {
      .stats-number {
        font-size: 18px;
      }
    }
  }
  
  .agreement-list {
    gap: 12px;
  }
  
  .card-header {
    padding: 14px 14px 10px;
  }
  
  .apartment-name {
    font-size: 15px;
  }
  
  .room-image-container {
    height: 120px;
    margin: 0 14px 10px;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 8px;
  }
  
  .action-btn {
    width: 100%;
    min-width: auto;
  }
}

/* 平板设备优化 */
@media (min-width: 768px) and (max-width: 1024px) {
  .agreement-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 0 24px;
  }
  
  .room-image-container {
    height: 200px;
  }
}

/* 大屏设备优化 */
@media (min-width: 1025px) {
  .agreement-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    padding: 0 32px;
    max-width: 1400px;
    margin: 0 auto;
  }
  
  .room-image-container {
    height: 220px;
  }
  
  .agreement-card:hover {
    transform: translateY(-16px) scale(1.03);
  }
}
</style>
